<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe id="ifr" src="./index.html" width="375px" height="667px"></iframe>
    <div>
      <div style="position: absolute; left: 400px; top: 20px">
        <h2>示例一（点击某个 xPath，上传固定 dPath 数据）：</h2>
        <p>假设当前全选 xPath 为：id("container")/div[0]/div[0]/p[2]</p>
        假设当前全选 dPath 配置分别为：
        <p>child/state/list/1/count</p>
      </div>
    </div>
    <br>
    <div style="position: absolute; left: 400px; top: 260px">
      <h2>示例二（点击某个概略路径 xPath，上传点击关联的 dPath 数据）：</h2>
      <p>假设当前全选 xPath 为：id("container")/div[0]/div[0]/p</p>
      假设当前全选 dPath 配置分别为：
      <p>child/state/list/*/price</p>
      <p>child/state/list/*/count</p>
    </div>
  </div>
    <button id="circle-select-btn" class="asd ds sda">
      开启/关闭圈选，当前状态： <span id="circle-select">关闭</span>
    </button>
    <div
      style="
        position: fixed;
        right: 20px;
        top: 10px;
        width: 300px;
        height: 600px;
        border: 1px solid red;
        overflow: scroll;
      "
    >
      <p>当前选中元素xPath: <span id="xpath"></span></p>
      <p>
        当前选中元素数据结构:
        <textarea
          id="data-snapshot"
          cols="30"
          rows="10"
          style="width: 300px; height: 600px"
        ></textarea>
      </p>
    </div>
  </body>
  <script>
    //   开启或关闭圈选功能
    let isCircleSelect = false;
    document.getElementById('circle-select-btn').onclick = function () {
      isCircleSelect = !isCircleSelect;
      document.getElementById('circle-select').innerHTML = isCircleSelect
        ? '开启'
        : '关闭';
      const ifrWindow = document.getElementById('ifr').contentWindow;
      ifrWindow.postMessage(
        {
          isCircleSelect,
        },
        location.href
      );
    };

    window.addEventListener('message', function (e) {
      if (e.data && e.data.type === 'pp-react-track') {
        const { xPath, dataSnapshot } = e.data.data;
        document.getElementById('xpath').innerHTML = xPath;
        document.getElementById('data-snapshot').value = JSON.stringify(
          dataSnapshot,
          null,
          2
        );
      }
    });
  </script>
</html>
